#bubble-effect {
	width: 100%;
	height: 200px;
	overflow: hidden;
	position: relative;
	background: #9d451f url(../images/index_bg/radial_gradient.svg) 50% 0
		no-repeat;
	background-size: 1400px 500px;
	margin-top: 10px;
}

.bubble-effect-layer-1 {
	position: absolute;
	height: 300px;
	top: 0;
	left: 0;
	right: 0;
	background: url(../images/index_bg/linear_gradient.svg) 0 0 no-repeat;
	background-size: 100% 300px;
}

.bubble-effect-layer-2,.bubble-effect-layer-3 {
	position: absolute;
	top: -500px;
	left: 50%;
	height: 1400px;
	width: 1400px;
	margin-left: -700px;
	-webkit-animation: spinner-l linear infinite;
	-moz-animation: spinner-l linear infinite;
	-ms-animation: spinner-l linear infinite;
	animation: spinner-l linear infinite;
}

.bubble-effect-layer-2 {
	background: url(../images/index_bg/layer_1.png) 50% 50% no-repeat;
	-webkit-animation-duration: 150s;
	-moz-animation-duration: 150s;
	-ms-animation-duration: 150s;
	animation-duration: 150s;
}

.bubble-effect-layer-3 {
	background: url(../images/index_bg/layer_2.png) 50% 50% no-repeat;
	-webkit-animation-duration: 75s;
	-moz-animation-duration: 75s;
	-ms-animation-duration: 75s;
	animation-duration: 75s;
}

.bubble-effect-shadow {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3) inset, 0 1px 3px
		rgba(0, 0, 0, 0.5) inset;
}

@-webkit-keyframes spinner-l {
	from { -webkit-transform: rotate(360deg); }
	to { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes spinner-l {
	from { -moz-transform: rotate(360deg); }
	to { -moz-transform: rotate(0deg); }
}

@-ms-keyframes spinner-l {
	from { -ms-transform: rotate(360deg); }
	to { -ms-transform: rotate(0deg); }
}

@keyframes spinner-l {
	from { transform: rotate(360deg); }
	to { transform: rotate(0deg); }
}